<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('事项跟进查看')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="ibox-content">
                <div class="row">
                    <div class="col-sm-5 b-r">
                        <div id="vertical-timeline" class="vertical-container light-timeline">
                            <div class="vertical-timeline-block" th:each="log : ${approveLogs}">
                                <div th:class="${(log.approveResult == 30 || log.approveResult == 10) ? 'vertical-timeline-icon red-bg' : 'vertical-timeline-icon navy-bg'}">
                                    <i class="fa fa-briefcase"></i>
                                </div>
                                <div class="vertical-timeline-content">
                                    <h2 th:text="${log.remark}"></h2>
                                    <p th:text="${log.createBy} + ' ' + ${#dates.format(log.createTime, 'yyyy-MM-dd HH:mm:ss')}"></p>
                                    <span th:text="${log.approveComment}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="ibox float-e-margins">
                            <div class="ibox-content">
                                <h3>驳回印证材料</h3>
                                <ul class="sortable-list connectList agile-list">
                                    <li class="danger-element" th:each="file : ${projectFiles}" th:if="${file.approveLog.approveResult == 50}">
                                        <th:block th:text="${file.oriFileName}"/>
                                        <a href="#" class="pull-right btn btn-xs btn-white" th:onclick="downloadFile([[${file.filePath}]])">下载</a>
                                        <!--<a href="#" class="pull-right btn btn-xs btn-white">预览</a>-->
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="ibox float-e-margins">
                            <div class="ibox-content">
                                <h3>办结印证材料</h3>
                                <ul class="sortable-list connectList agile-list">
                                    <li class="success-element" th:each="file : ${projectFiles}" th:if="${file.approveLog.approveResult != 50}">
                                        <th:block th:text="${file.oriFileName}"/>
                                        <a href="#" class="pull-right btn btn-xs btn-white" th:onclick="deleteFile([[${file.projectFileId}]])">删除</a>
                                        <a href="#" class="pull-right btn btn-xs btn-white" th:onclick="downloadFile([[${file.filePath}]])">下载</a>
                                        <a href="#" class="pull-right btn btn-xs btn-white" th:onclick="showFiles([[${file.fileName}]], [[${file.oriFileName}]], [[${file.filePath}]]);">预览</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        function IEVersion() {
            let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            let isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
            let isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
            let isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
            if(isIE) {
                let reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                reIE.test(userAgent);
                let fIEVersion = parseFloat(RegExp["$1"]);
                if(fIEVersion == 7) {
                    return 7;
                } else if(fIEVersion == 8) {
                    return 8;
                } else if(fIEVersion == 9) {
                    return 9;
                } else if(fIEVersion == 10) {
                    return 10;
                } else {
                    return 6;//IE版本<=7
                }
            } else if(isEdge) {
                return 'edge';//edge
            } else if(isIE11) {
                return 11; //IE11
            }else{
                return -1;//不是ie浏览器
            }
        }

        function submitHandler() {
            $.modal.close();
        }

        function downloadFile(value){
            window.location.href = ctx + "common/download/resource?resource=" + value;
        }

        function deleteFile(id) {
            $.modal.confirm("确认要删除该附件吗?", function() {
                var url = ctx + "manage/file/remove";
                var data = { "ids": id };
                $.operate.submit(url, "post", "json", data, function () {
                    $.modal.close();
                });
            });
        }

        function showFiles(fileName, oriFileName, filePath) {
            // 弹窗预览文件
            // 根据fileName判断文件类型，初始化不同的预览插件进行文件的预览
            // 经过查看RuoYi文档，及源码。选定使用layer的原生实现
            var fileNameArr = fileName.split('.');
            var suffixLowercase = fileNameArr[fileNameArr.length-1].toLowerCase();
            var imageTypes = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
            var pdfTypes = ['pdf'];
            // 如果是图片
            if(imageTypes.indexOf(suffixLowercase) > -1) {
                layer.open({
                    type: 1,
                    title: [
                        '图片预览',
                        'background-color: #CCCCCC; color:#000000;margin:0;text-align: left;'
                    ],
                    anim: 'up',
                    area: ['70%', '650px'], //宽高
                    content: '<img src="" style="max-width: 100%;clear: both;display: block;margin: auto" id="imgElement" />',
                    success: function (elem) {
                        $(elem).find('#imgElement').attr('src', filePath);
                    }
                });
            }
            // 如果是pdf
            else if(pdfTypes.indexOf(suffixLowercase) > -1) {

                if(IEVersion() != -1) {
                    $.modal.msgWarning("IE浏览器暂不支持在线预览PDF文件，建议使用Chrome浏览器");
                    return;
                }

                layer.open({
                    type: 1,
                    title: [
                        'PDF预览',
                        'background-color: #CCCCCC; color:#000000;margin:0;text-align: left;'
                    ],
                    anim: 'up',
                    area: ['70%', '650px'], //宽高
                    content: '<iframe src="" width="100%" height="100%" style="border: none;width:100%;height:100%;" id="pdfContainer"></iframe>',
                    success: function (elem) {
                        var pdfmodule = '/js/plugins/pdfjs-2.7.570-es5-dist/web/viewer.html';
                        $(elem).find('#pdfContainer').attr('src', pdfmodule+'?file='+filePath);
                    }
                });
            }
            // 其他，后续可以支持，比如视频、音乐
            // TODO 封装方法
            else {
                $.modal.msgError(suffixLowercase + " 类型暂不支持预览，请点击下载按钮进行预览");
            }

        }
    </script>
</body>
</html>